<template>
  <div class="channels" v-if="data.length">
    <div :class="{item:true,active:chooseId==item.channelId}" v-for="item in showChannels" :key="item.channelId" @click="switchChannel(item.channelId)">
      <span class="name">{{item.name}}</span>
    </div>

    <a href="" @click.prevent="isCollapse=!isCollapse">{{isCollapse?"展开":"收起"}}</a>
  </div>
</template>

<script>
import {getNewsChannels,getNews} from "@/services/newsService"
import {mapState} from "vuex"

export default {
    data() {
        return {
            isCollapse:true,  //是否折叠
            chooseId:null
        }
    },
    watch: {
        data:{
            immediate:true,
            handler(){
                if(this.data.length>0){
                    this.switchChannel(this.data[0].channelId)
                }
            }
        }
    },
    computed: {
        showChannels(){
            if(this.isCollapse){
                return this.data.slice(0,10)
            }else{
                return this.data
            }
        },
        ...mapState("channels",["data"])
    },
    methods: {
        switchChannel(id){
            this.chooseId = id
            this.$emit("changeId",id)
        }
    }
}
</script>

<style scoped>
    .channels{
        margin: 0 auto;
        width: 100%;
        border-bottom: 1px solid #777;
        margin-bottom: 10px;
        position: relative;
        padding-bottom: 20px;
    }
    .item:hover{
        background-color: #888;
    }
    .item{
        display: inline-block;
        border: 1px solid rgb(90, 82, 82);
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    a{
        color: blue;
        text-decoration: none;
        position: absolute;
        right: 10px;
        bottom: 5px;
    }
    .active,.active:hover{
        background-color: #333;
        color: white;
    }
</style>